<template>
    <div class="cl">
        <table>
            <thead>
            <th style="border:1px solid #0094ff;text-align:center;width: 4%;">序号</th>
            <th style="border:1px solid #0094ff;text-align:center;width: 10%;">车牌号码</th>
            <th style="border:1px solid #0094ff;text-align:center">车辆颜色</th>
            <th style="border:1px solid #0094ff;text-align:center">标记吨位（吨）</th>
            <th style="border:1px solid #0094ff;text-align:center">总质量（吨）</th>
            <th style="border:1px solid #0094ff;text-align:center">趟次数 (次)</th>
            <th style="border:1px solid #0094ff;text-align:center">行驶里程 (公里)</th>
            <th style="border:1px solid #0094ff;text-align:center">载货里程 (公里)</th>
            <th style="border:1px solid #0094ff;text-align:center">高速公路里程</th>
            <th style="border:1px solid #0094ff;text-align:center">货运量 (吨)</th>
            <th style="border:1px solid #0094ff;text-align:center">货物周转量 (吨公里)</th>
            <th style="border:1px solid #0094ff;text-align:center">平均运距 (公里)</th>
            <th style="border:1px solid #0094ff;text-align:center">燃料类型</th>
            <th style="border:1px solid #0094ff;text-align:center">能耗 (升/立方米/千克/千瓦时)</th>
            <th style="border:1px solid #0094ff;text-align:center;">主要货物种类</th>
            </thead>
            <tbody>
            <tr v-for="(item,index) in hyclData" :key="index">
                <td>{{index+1>9?index+1:'0'+(index+1)}}</td>
                <!--// 车牌号码	                    [CLDCB2019001]-->
                <!--// 车牌颜色                     [CLDCB2019002]-->
                <!--// 标记吨位（吨）                  [CLDCB2019003]-->
                <!--// 总质量（吨）                   [CLDCB2019004]-->
                <!--// 趟次数（次）                   [CLDCB2019005]-->
                <!--// 行驶 里程（公里）            [CLDCB2019006]-->
                <!--// 载货里程（公里）             [CLDCB2019007]-->
                <!--// 高速公路里程（公里）           [CLDCB2019008]-->
                <!--// 货运量（吨）                   [CLDCB2019009]-->
                <!--// 货物周转量（吨公里）           [CLDCB20190015]-->
                <!--// 平均运距（公里）                 [CLDCB20190016]-->
                <!--// 燃料类型                     [CLDCB20190011]-->
                <!--// 能耗（升、立方米、千瓦时、吨）  [CLDCB20190012]-->
                <!--// 主要货物种类                   [CLDCB20190013]-->
                <td class="data">{{item.cldcb2019001}}</td>
                <td class="data">{{item.cldcb2019002}}</td>
                <td class="data">{{item.cldcb2019003}}</td>
                <td class="data">{{item.cldcb2019004}}</td>
                <td class="data">{{item.cldcb2019005}}</td>
                <td class="data">{{item.cldcb2019006}}</td>
                <td class="data">{{item.cldcb2019007}}</td>
                <td class="data">{{item.cldcb2019008}}</td>
                <td class="data">{{item.cldcb2019009}}</td>
                <td class="data">{{item.cldcb20190015}}</td>
                <td class="data">{{item.cldcb20190016}}</td>
                <td class="data">{{item.cldcb20190011}}</td>
                <td class="data">{{item.cldcb20190012}}</td>
                <td class="data">{{item.cldcb20190013}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                hyclData: [],
            }
        },
        mounted() {
            this.getData();
            this.hp();
        },
        destroyed() {
            this.sp();
        },
        methods: {
            hp() {
                plus.screen.lockOrientation('landscape-primary');//横屏正方向
            },
            sp() {
                plus.screen.lockOrientation('portrait-secondary');//竖屏正方向
            },

            getData() {

                this.axios.post('http://zxdc.catsic.com:9090/sampling/fill/getCarInfo', {
                    'data': {
                        "recid": localStorage.getItem('id'),
                    }
                }, {
                    'headers': {
                        'Content-Type': 'application/json',
                        'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                    }
                }).then(result => {
                        if (result.data.status == "1000") {
                            this.hyclData = result.data.data.cldcb2019CpList;
                            // localStorage.setItem('hyclData', JSON.stringify(this.hyclData));
                        }
                        console.log(result);
                    }, error => {
                        console.log("getCarInfo request error:" + error);
                    }
                );
            },

            // getData() {
                // 车牌号码	                    [CLDCB2019001]
                // 车牌颜色                     [CLDCB2019002]
                // 标记吨位（吨）                  [CLDCB2019003]
                // 总质量（吨）                   [CLDCB2019004]
                // 趟次数（次）                   [CLDCB2019005]
                // 行驶 里程（公里）            [CLDCB2019006]
                // 载货里程（公里）             [CLDCB2019007]
                // 高速公路里程（公里）           [CLDCB2019008]
                // 货运量（吨）                   [CLDCB2019009]
                // 货物周转量（吨公里）           [CLDCB20190015]
                // 平均运距（公里）                 [CLDCB20190016]
                // 燃料类型                     [CLDCB20190011]
                // 能耗（升、立方米、千瓦时、吨）  [CLDCB20190012]
                // 主要货物种类                   [CLDCB20190013]
            //     this.hyclData = JSON.parse(localStorage.getItem("hyclData"));
            // },
        },
    }

</script>

<style lang="scss" scoped>
    .cl {
        padding-top: 20px
    }

    table {
        border: 1px solid #0094ff;
        border-collapse: collapse;
        width: 100%;
        height: 100%;
        background-color: rgb(105, 180, 223);
        margin-bottom: 10px;
    }

    table tr {
        text-align: center;
    }

    table tr td {
        border: 1px solid #0094ff;
    }

    .data {
        background-color: #ffffff;
    }

    button {
        font-size: large;
    }
</style>